import React, { useState, useEffect } from "react";
import { useRequest } from "ahooks";
import { NavBar, Grid, List, Image, Space, Rate } from "antd-mobile";
import { Input, Button, Form } from "react-vant";
import { useNavigate, useParams } from "react-router-dom";
import { librarylistQuery } from "./sevice/bookService";
import style from "../book/css/Home.module.css";
import photo from "./img/1.jpg";
export default function () {
  const navigate = useNavigate();
  const { bookId, bookName } = useParams();
  const [data, setData] = useState([]);
  const datalist = [
    {
      id: 1,
      name: "Novalee Spicer",
      description: "很不错的,书很全",
      avatar: photo,
    },
    {
      id: 2,
      name: "Sara Koivisto",
      description: "很不错的图书馆书很全",
      avatar: photo,
    },
    {
      id: 3,
      name: "Marco Gregg",
      description: "图书馆书很全",
      avatar: photo,
    },
    {
      id: 4,
      name: "Marco Gregg",
      description: "很不错的图书馆，书很全",
      avatar: photo,
    },
    {
      id: 5,
      name: "Marco Gregg",
      description: "很不错",
      avatar: photo,
    },
    {
      id: 6,
      name: "Marco Gregg",
      description: "很不错的图书馆，书很全",
      avatar: photo,
    },
    {
      id: 7,
      name: "Marco Gregg",
      description: "很不错的图书馆，书很全",
      avatar: photo,
    },
  ];
  const arrAdd = [
    {
      id: 8,
      name: "leson",
      description: "好",
    },
  ];
  // 图书馆分类详情
  const listRes = useRequest(librarylistQuery, {
    onSuccess: (res) => {
      console.log(res);
      let list1 = res.data.rows.map((item) => {
        return {
          ...item,
        };
      });
      setData(list1);
    },
  });
  // 评论
  const [form] = Form.useForm(); //清空表单
  const reset = () => {
    form.resetFields();
  };
  const onFinish = async (values) => {
    console.log(values);
    reset();
  };
  useEffect(() => {
    listRes.run({});
  }, []);
  return (
    <div>
      <div className={`base ${style.bookbody}`}></div>
      <NavBar
        style={{
          position: "fixed",
          top: "0",
          zIndex: "999",
          backgroundColor: "#fff",
          width: "100%",
        }}
        onBack={() => {
          navigate("/book");
        }}
      >
        {bookId}
        {bookName}
      </NavBar>
      {/* 图书馆详情 */}
      <div className={`base ${style.content}`}>
        <div className={`base ${style.contentflex}`}>
          <Grid columns={1} gap={1}>
            {data.map((item) => {
              return (
                <Grid.Item
                  key={item.id}
                  style={{
                    boxShadow: "rgb(224 218 218) 5px 1px 10px",
                    marginBottom: "10px",
                    width: "320px",
                  }}
                  onClick={() => {
                    // navigate(`/book/${item.id}`);
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                    }}
                  >
                    <div>
                      <img
                        src={"http://124.93.196.45:10001/" + item.imgUrl}
                        style={{
                          width: "100px",
                          height: "100px",
                          marginRight: "10px",
                        }}
                      />
                    </div>
                    <div style={{ marginTop: "10px" }}>
                      <div>
                        地址:
                        <span style={{ fontSize: "10px" }}>{item.address}</span>
                      </div>
                      <div>
                        营业时间:
                        <span style={{ fontSize: "10px" }}>
                          {item.businessHours}
                        </span>
                      </div>
                    </div>
                  </div>
                </Grid.Item>
              );
            })}
          </Grid>
        </div>
      </div>
      {/* 评论 */}
      <List header="评论" style={{ marginBottom: "10px" }}>
        {datalist.map((item) => (
          <List.Item
            key={item.id}
            prefix={
              <Image
                src={item.avatar}
                style={{ borderRadius: 20 }}
                fit="cover"
                width={40}
                height={40}
              />
            }
            description={item.description}
          >
            {item.name}
            <Space
              direction="vertical"
              style={{ position: "relative", top: "20px", left: "150px" }}
            >
              <Rate allowClear={true} count={1} />
            </Space>
          </List.Item>
        ))}
      </List>
      <Form
        style={{ padding: 20 }}
        form={form}
        onFinish={onFinish}
        footer={
          <div style={{ margin: "16px 16px 0" }}>
            <Button
              round
              nativeType="submit"
              block
              style={{ background: "blue", color: "#F7F7F9" }}
            >
              提交
            </Button>
          </div>
        }
      >
        <Form.Item
          name="content"
          style={{
            borderTop: "0.5px solid #d5d2d2",
            position: "fixed",
            bottom: 0,
            backgroundColor: "#fff",
          }}
        >
          <Input.TextArea
            rows={3}
            autoSize
            maxLength={30}
            showWordLimit
            placeholder="感谢您的想法与建议，我们将会考虑和完善"
          />
        </Form.Item>
      </Form>
    </div>
  );
}
